<template>
  <el-container>
    <el-header style="margin-bottom: 30px;">
      <el-form :inline="true" :model="form">
        <el-form-item><el-input v-model="form.account" placeholder="请输入账号"></el-input></el-form-item>
        <el-form-item><el-input v-model="form.company" placeholder="请输入公司名称"></el-input></el-form-item>
        <el-form-item>
          <el-select v-model="form.status" placeholder="请选择">
            <el-option
              v-for="(item,k) in statusList"
              :key="k"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item><el-button type="primary" @click="getList">搜索</el-button></el-form-item>
      </el-form>
    </el-header>

    <el-main>
        <el-table
        :data="supply.list"
        style="width: 100%"
        >
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="公司" prop="company"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="账号" prop="account"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="手机" prop="phone"></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="理由" prop="reason"></el-table-column>
        <el-table-column label="创建时间" prop="created_at"></el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">

              <div class="frow fcenter" style="align-items: flex-end;">
                <div> <el-button type="primary" @click="editSupply(scope.row)" size="mini">编辑</el-button></div>
                <div style="margin-left: 10px;"> <el-button type="danger" @click="delSupply(scope.row)" size="mini">删除</el-button></div>
              </div>


            </template>
        </el-table-column>
        </el-table>
    </el-main>

    <el-footer>
        <el-pagination
      background
      style="padding: 20px 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="form.page"
      :page-sizes="[20, 30, 40, 50]"
      :page-size="form.page_size"
      layout="prev, pager, next,sizes"
      :total="supply.total">
    >
    </el-pagination>
    </el-footer>


<!-- 弹窗 -->

        <el-dialog :title="company" :visible.sync="dialogFormVisible">
            <el-form :model="update">

            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio v-model="update.status" :label="item.id" v-for="(item,k) in statusList" :key="k">{{ item.label }}</el-radio>
            </el-form-item>

            <el-form-item label="理由" :label-width="formLabelWidth">
                <el-input v-model="update.reason" autocomplete="off" type="textarea" :rows="2"></el-input>
            </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="passSupply">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog
        title="警告"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <span>确认删除?</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmDel">确 定</el-button>
        </span>
        </el-dialog>


</el-container>




</template>

<script>
import { mapActions,mapState } from 'vuex';

import {editSupply, delSupply} from "@/apilist/SystemSetting"

export default {
name : "setSupplier",
data(){
    return {
        form: {
            status: 0,
            account: '',
            company: '',
            page: 1,
            page_size: 10,
        },

        statusList : [
            {id: 0,label: '待审核'},
            {id: 1,label: '通过'},
            {id: 2,label: '拒绝'},

        ],
        dialogFormVisible: false,
        formLabelWidth: '80',
        update: {
            id: '',
            status: '',
            reason: '',
        },
        company: '供应商',
        centerDialogVisible: false,
        delId: 0,
    }
},


computed: {
    ...mapState("Setdata",["supply"]),
},

methods: {
...mapActions("Setdata",["getSupplyAction"]),

    getList(){
        this.getSupplyAction(this.form);
    },
    editSupply(row){
        this.update.id = row.id
            this.update.status = row.status
            this.update.reason = row.reason
            this.company = row.company
            this.dialogFormVisible = true;
    },
    delSupply(row){

        this.delId = row.id;
        this.centerDialogVisible = true;
    },

    handleSizeChange(val) {
      this.form.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
     this.form.page = val;
     this.getList();
    },

    passSupply(){
        let that = this;
        editSupply(this.update).then(res => {
            if(res.state == 'ok'){
                this.$message({
                    type: 'success',
                    message: '操作成功',
                    onClose: () =>{
                        that.dialogFormVisible = false;
                        that.update.id = 0;
                        that.update.status = '';
                        that.update.reason = "";
                        that.getList();
                    }
                });
            }
        })
    },

    confirmDel(){
        let that = this;
          delSupply({id: this.delId}).then(res => {
            if(res.state == 'ok'){
                this.$message({
                    type: 'success',
                    message: '删除成功',
                    onClose: function(){
                        that.centerDialogVisible = false;
                        that.getList();
                    }
                });
            }
        });
    }
},
}
</script>

<style scoped>

</style>
